import react from "react";
import G2 from "@antv/g2";

class SampleChart extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    // G2 初始化图形代码
    this.chart = new G2.Chart({
      // this.containerRef.current 即为引用
      container: this.containerRef.current,
      width: 450,
      height: 300
    });
  }

  refreshChart = () => {
    this.chart.source(this.props.data);

    this.chart
      .interval()
      .position("genre*sold")
      .color("genre");
    this.chart.render();
  };

  render() {
    return <div ref={this.containerRef} />;
  }
}

export default SampleChart;
